<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div class="title">
          <span style="font-size: 13px; color: pink"
            >说明：目前支持学科和关键字条件筛选</span
          >
          <el-button class="addbtn">
            <i class="el-icon-edit"></i>
            <span @click="$router.push('/questions/new')">新增试题</span>
          </el-button>
        </div>
        <el-form :model="form" label-width="100px" style="margin-top: 20px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  style="width: 100%"
                  v-model="form.subjectID"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in subjectList"
                    :key="item.id"
                    :label="item.subjectName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select
                  style="width: 100%"
                  v-model="form.catalogID"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in twoLevelDirectoryList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select
                  style="width: 100%"
                  v-model="form.tags"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in lableList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  v-model="form.keyword"
                  placeholder="请输入关键字"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select
                  style="width: 100%"
                  v-model="form.questionType"
                  placeholder="请选择"
                >
                  <el-option label="单选" value="1"></el-option>
                  <el-option label="双选" value="2"></el-option>
                  <el-option label="简答" value="3"></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select
                  style="width: 100%"
                  v-model="form.difficulty"
                  placeholder="请选择"
                >
                  <el-option label="简单" value="1"></el-option>
                  <el-option label="一般" value="2"></el-option>
                  <el-option label="困难" value="3"></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select
                  style="width: 100%"
                  v-model="form.direction"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in directionList"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select
                  style="width: 100%"
                  v-model="form.creatorID"
                  placeholder="请选择"
                >
                  <el-option label="超级管理员" value="超级管理员"></el-option>
                  <el-option label="录入管理员" value="录入管理员"></el-option>
                </el-select> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="form.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input v-model="form.shortName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <el-col :span="11">
                  <el-select v-model="form.province" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in provincesList"
                      :key="index"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                  <el-select v-model="form.city" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in cityList"
                      :key="index"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-col> </el-form-item
            ></el-col>
            <el-col :span="6" style="text-align: right;font-size:14px" >
              <el-form-item>
                <el-button @click="clearFn">清除</el-button>
                <el-button
                  style="background-color: blue; color: #fff"
                  @click="searchFn"
                  >搜索</el-button
                >
              </el-form-item></el-col
            >
          </el-row>
        </el-form>

        <div class="total">
          <i class="el-icon-info"></i>
          <span
            class="el-alert__title"
            style="margin-left: 10px; font-size: 13px"
            >数据一共 {{ count }}条</span
          >
        </div>
        <el-table
          :data="baselist"
          style="width: 100%; margin-top: 10px; font-size: 14px"
        >
          <el-table-column prop="number" label="试题编号" width="120">
          </el-table-column>
          <el-table-column prop="subject" label="学科">
          </el-table-column>
          <el-table-column prop="catalog"  label="目录">
          </el-table-column>
          <el-table-column
            :formatter="formatterQuestion"
            prop="questionType"
            label="题型"
          >
          </el-table-column>
          <el-table-column prop="question"  label="题干">
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="180">
          </el-table-column>
          <el-table-column prop="creator" label="录入人" >
          </el-table-column>
          <el-table-column
            :formatter="formatterDifficulty"
            prop="difficulty"
            label="难度"
          >
          </el-table-column>
          <el-table-column prop="address" label="操作" width="180">
            <template v-slot="scope">
              <el-button
                icon="el-icon-view"
                @click="previewFn(scope.row.id)"
                circle
              ></el-button>
              <el-button
                type="primary"
                @click="$router.push(`/questions/new?id=${scope.row.id}`)"
                icon="el-icon-edit"
                circle
              ></el-button>
              <el-button
                type="danger"
                @click="delQuestionsFn(scope.row)"
                icon="el-icon-delete"
                circle
              ></el-button>
              <el-button
                type="success"
                @click="subQuestionsFn(scope.row)"
                icon="el-icon-check"
                circle
              ></el-button>
            </template>
          </el-table-column>
        </el-table>

        <div style="text-align: right; margin-top: 20px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="query.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count"
          >
          </el-pagination>
        </div>
        <el-dialog
          v-if="showdialog"
          title="题目预览"
          :visible.sync="showdialog"
          width="60%"
          :before-close="handleClose"
           v-loading="loading"
        >
          <el-row class="rowHeader">
            <el-col :span="6">
              【题型】: {{ formatterQuestionFn(previewDetailObj.questionType) }}
            </el-col>
            <el-col :span="6"> 【编号】: {{ previewDetailObj.id }} </el-col>
            <el-col :span="6">
              【难度】:
              {{ formatterDifficultyFn(previewDetailObj.questionType) }}
            </el-col>
            <el-col :span="6"> 【标签】: {{ previewDetailObj.tags }} </el-col>
          </el-row>
          <el-row class="rowHeader">
            <el-col :span="6">
              【学科】: {{ previewDetailObj.subjectName }}
            </el-col>
            <el-col :span="6">
              【目录】{{ previewDetailObj.directoryName }}
            </el-col>
            <el-col :span="6">
              【方向】{{ previewDetailObj.direction }}
            </el-col>
          </el-row>
          <hr />
          <div class="pad">【题干】:</div>
          <div
            v-html="previewDetailObj.question"
            style="color: blue; font-size: 18px"
          ></div>
          <div v-if="previewDetailObj.questionType !== '3'">
            <div class="pad">
              {{ formatterQuestionFn(previewDetailObj.questionType) }}选项:
              (以下选中的选项为正确答案)
            </div>
            <div
              class="pad"
              v-for="item in previewDetailObj.options"
              :key="item.id"
            >
              <el-radio :value="item.isRight" :label="1">{{
                item.title
              }}</el-radio>
            </div>
          </div>
          <hr />
          <div class="pad">
            【参考答案】:
            <el-button class="videobtn" @click="videoshow = !videoshow"
              >视频答案预览</el-button
            >
            <div
              v-show="videoshow"
            >
              <!-- 视频存放位置 -->
              <template>
                <div class="demo" style="width:100%,height:100%">
                  <video-player
                    class="video-player vjs-custom-skin"
                    ref="videoPlayer"
                    :playsinline="true"
                    :options="playerOptions"
                  >
                  </video-player>
                </div>
              </template>
            </div>
          </div>
          <hr />
          <div class="pad" style="display: flex">
            <p>【答案解析】:</p>
            <span v-html="previewDetailObj.answer"> </span>
          </div>
          <hr />
          <div class="pad">【题目备注】:{{ previewDetailObj.tags }}</div>
          <div style="text-align: center">
            <span slot="footer" class="dialog-footer">
              <el-button
                style="font-size: 25px; background-color: blue; color: #fff"
                @click="(showdialog = false), (videoshow = false)"
                >关闭</el-button
              >
            </span>
          </div>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  list as questionList,
  detail as detailList,
  remove as removeQuestion,
  choiceAdd
} from '@/api/hmmm/questions.js'
import { list as subjectsList } from '@/api/hmmm/subjects.js'
import { simple as tagsSimple } from '@/api/hmmm/tags.js'
import { simple as directorysSimple } from '@/api/hmmm/directorys.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
// 视频组件
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
export default {
  // page 否 1 当前页数
  // pagesize 否 10 页尺寸
  // subjectID 否 学科
  // difficulty 否 难度
  // questionType 否 试题类型
  // tags 否 标签名称
  // province 否 企业所在地省份
  // city 否 企业所在城市
  // keyword 否 关键字
  // remarks 否 题目备注
  // shortName 否 企业简称
  // direction 否 方向
  // creatorID 否 录入人
  // catalogID
  data () {
    return {
      loading: true,
      videoshow: false,
      isRight: 1, // 为正确答案
      showdialog: false, // 弹框显示与隐藏
      count: 0,
      query: {
        // 获取分页信息
        page: 1,
        pagesize: 5
      },
      querySubject: {
        // 获取学科列表
        page: 1,
        pagesize: 100
      },
      form: {
        // 输入框信息
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: ''
      },
      baselist: [], // 去除标签后的总数据
      subjectList: [], // 学科列表
      twoLevelDirectoryList: [], // 二级目录列表
      lableList: [], // 标签列表
      directionList: [], // 枚举
      provincesList: [], // 省份列表
      cityList: [], // 城市列表
      previewDetailObj: {}, // 基础题库详情
      tags: [], // 标签

      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: 'video/mp4', // 类型
            src: 'https://v-cdn.zjol.com.cn/277004.mp4' // url地址
          }
        ],
        poster: '', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      }
    }
  },
  components: {
    videoPlayer
  },
  created () {
    this.getbaselistFn() // 去除标签后的总数据
    this.getSubjectListFn()
    this.directionList = direction // 枚举方向列表
    this.provincesList = provinces() // 省份
    // this.getsimpleFn()
  },
  methods: {
    // 点击事件，清除输入框的内用
    clearFn () {
      this.form = {
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: ''
      }
    },
    // 点击搜索。搜索输入信息
    async searchFn () {
      if (this.form.subjectID === '' && this.form.keyword === '') {
        const res = await questionList({ ...this.query })
        // console.log(res)
        this.baselist = this.disLableFn(res.data.items)
      } else if (this.form.subjectID === '' && this.form.keyword !== '') {
        const res = await questionList({
          ...this.query,
          keyword: this.form.keyword
        })
        // console.log(res)
        this.baselist = this.disLableFn(res.data.items)
      } else if (this.form.subjectID !== '' && this.form.keyword === '') {
        const res = await questionList({
          ...this.query,
          subjectID: this.form.subjectID
        })
        // console.log(res)
        this.baselist = this.disLableFn(res.data.items)
      } else {
        const res = await questionList({
          ...this.query,
          subjectID: this.form.subjectID,
          keyword: this.form.keyword
        })
        // console.log(res)
        this.baselist = this.disLableFn(res.data.items)
      }
    },
    // 点击事件，将改题目加入精选
    async subQuestionsFn (obj) {
      console.log(obj)
      const confirmRes = await this.$confirm(
        '此操作将该题目加入精选, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confirmRes === 'cancel') return this.$message.info('您取消了该操作')
      const res = await choiceAdd({ id: obj.id, choiceState: 1 })
      console.log(res)
      this.$message.success('添加成功')
      this.getbaselistFn()

      this.$router.push('/questions/choice')
    },
    // 点击事件删除题目
    async delQuestionsFn (obj) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该题目, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      // console.log(obj)
      if (confirmRes === 'cancel') return this.$message.info('您取消了删除')
      // 删除数据
      const res = await removeQuestion(obj)
      // 没数据
      if (this.baselist.length === 0) {
        if (this.query.page === 1) {
          return
        }
        this.query.page--
        // 更新
        this.getbaselistFn()
      }
      console.log(res)
      this.$message.success('删除成功')
      this.getbaselistFn()
    },
    // 关闭弹框
    handleClose () {
      this.showdialog = false
      this.videoshow = false
    },
    // 获取基础题库详情
    async previewFn (theid) {
      this.showdialog = true
      // console.log(a)
      const res = await detailList({ id: theid })
      // console.log(res)
      this.previewDetailObj = res.data
      console.log(this.previewDetailObj)
      this.playerOptions.sources.src = this.previewDetailObj.videoURL
      this.loading = false
    },

    // 获取目录列表
    async getDirectorysFn (data) {
      const res = await directorysSimple(data)
      // console.log(res)
      this.twoLevelDirectoryList = res.data
    },
    // 获取学科详情
    async getsimpleFn (data) {
      const res = await tagsSimple(data)
      // console.log(res)
      this.lableList = res.data
    },
    // 获取所有的学科列表
    async getSubjectListFn () {
      const res = await subjectsList(this.querySubject)
      // console.log(res)
      this.subjectList = res.data.items
      // console.log(this.subjectList)
    },

    // 枚举方法
    formatterDifficultyFn (a) {
      const obj = difficulty.find((item) => item.value === Number(a))
      return obj ? obj.label : ''
    },
    formatterQuestionFn (a) {
      const obj = questionType.find((item) => item.value === Number(a))
      return obj ? obj.label : ''
    },
    // 枚举
    formatterQuestion (row, column, cellvalue, index) {
      const obj = questionType.find((item) => item.value === Number(cellvalue))
      return obj ? obj.label : '未知'
    },
    formatterDifficulty (row, column, cellvalue, index) {
      const obj = difficulty.find((item) => item.value === Number(cellvalue))
      return obj ? obj.label : '未知'
    },
    // 渲染页面
    async getbaselistFn () {
      const res = await questionList(this.query)
      // console.log(res)
      this.count = res.data.counts
      this.baselist = this.disLableFn(res.data.items)
    },
    // 封装的去除标签方法
    disLableFn (data) {
      const transLate = data
      transLate.forEach((item) => {
        item.question = item.question.replace(/<[^>]+>/g, '')
      })
      return transLate
    },
    // 分页功能
    handleSizeChange (newSize) {
      this.query.pagesize = newSize
      this.getbaselistFn()
    },
    // 分页功能
    handleCurrentChange (newPage) {
      this.query.page = newPage
      this.getbaselistFn()
    }
  },
  watch: {
    'form.province': {
      handler (newName, oldName) {
        // console.log(newName)
        this.cityList = citys(newName)
        // console.log(this.cityList)
      },
      immediate: true
      // deep: true
    },
    'form.subjectID': {
      handler (newName, oldName) {
        // console.log(oldName)
        // console.log(newName)
        this.form.catalogID = ''
        this.form.tags = ''
        if (newName !== '') {
          this.getsimpleFn({ subjectID: newName })
          this.getDirectorysFn({ subjectID: newName })
        }
      },
      immediate: true
      // deep: true
    }
  }
}
</script>

<style scoped>
.el-button--medium.is-circle{
padding: 8px;
}
::v-deep .video-js .vjs-big-play-button{
position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.video-player.video-player.vjs-custom-skin {
    height: 100%;
}

::v-deep .video-js.vjs-fluid, .video-js.vjs-16-9, .video-js.vjs-4-3 {
    width: 100%;
    max-width: 100%;
    height: 100%;
}
.demo{
  margin-top: 10px;
  width: 400px;
  height: 300px;
}
.videobtn {
  background-color: red;
  color: #fff;
}
.pad {
  padding: 10px 0;
  font-size: 18px;
}
.rowHeader {
  padding: 10px 0;
  color: #606266;
  font-size: 16px;
}
.el-dialog__body {
  padding: 30px 20px !important;
}
::v-deep .el-form-item__label {
  font-size: 14px;
  color: #606266;
  font-weight: 700;
}
.title {
  display: flex;
  justify-content: space-between;
}
.addbtn {
  font-size: 12px;
  border-radius: 3px;
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}
.el-button--medium.is-circle {
    padding: 8px;
}
 ::v-deep  .total {
  padding: 8px 16px;
  background-color: #f4f4f5;
  color: #909399;
}
::v-deep .el-table th {
  background-color: #fafafa;
  color: #909399;
  font-weight: 700;
}
::v-deep .has-gutter {
  color: blue;
  font-weight: 700;
}
</style>
